<template>
  <div class="layui-layout layui-layout-admin zlgj-page" >

    <div class="adminnav2">
     <Secondnav urlname="phbtj"></Secondnav>
    </div>
    <div class="viewport01"></div>
      <div class="layui-body kedou-admin" id="LAY_app_body">
        <div class="layui-fluid">
          <div class="layui-row layui-col-space15">
            <div class="layui-fluid" style="margin-top:-15px;">
                 <div class="layui-row layui-col-space15">
                   <div class="layui-col-md6">
			              <div class="layui-card">
			                <div class="layui-card-header">商家销售排行榜</div>
			                <div class="layui-card-body">
			                  <div id="ptb01" class="kehutb"></div>
			                </div>
			              </div>
			            </div>
			            <div class="layui-col-md6">
			              <div class="layui-card">
			                <div class="layui-card-header">顾客消费排行榜</div>
			                <div class="layui-card-body">
			                  <div id="ptb02" class="kehutb"></div>
			                </div>
			              </div>
			            </div>
			            <div class="layui-col-md6">
			              <div class="layui-card">
			                <div class="layui-card-header">人流聚集排行榜</div>
			                <div class="layui-card-body">
			                  <div id="ptb03" class="kehutb"></div>
			                </div>
			              </div>
			            </div>
			            <div class="layui-col-md6">
			              <div class="layui-card">
			                <div class="layui-card-header">消费者区域排行榜</div>
			                <div class="layui-card-body">
			                  <div id="ptb04" class="kehutb"></div>
			                </div>
			              </div>
			            </div>
                </div>
            </div>
          </div>
        </div>
  		</div>	　
  </div>
</template>
<script>
  import echarts from 'echarts'
  import Pagetop from '../common/pagetop.vue'
  import Secondnav from '../common/zlgjsecondnav.vue'
export default {
  name: 'kehu',
  components: {Pagetop,Secondnav},
  data () {
    return {
      itemData:''
    }
  },
  mounted(){
     this.getdate();

  },
  methods: {
    getdate:function(){
    	var url='/salesreport/aapi/v1.9/pedestrian-street';
    	var _this=this;
    	ajaxRequest(url,'GET','json','',function(ret,err){
    		_this.itemData=ret.data;
      	_this.getptb01();
      	_this.getptb02();
      	_this.getptb03();
      	_this.getptb04();
    	})

    },
    getptb01:function(){
      var res=this.itemData.storeSales;
      var arr1=[]
      var arr2=[];
      for(var i=0;i<res.length;i++){
        arr1.push(res[i].name)
        arr2.push(res[i].salesVolume)
      }
      var option = {
				barWidth :10,
		    grid: {
		        left: '3%',
		        right: '3%',
		        bottom: '3%',
		        top:'3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01],
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    yAxis: {
		        type: 'category',
		        data: arr1,
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    series: [
		        {
		            name: '2011年',
		            type: 'bar',
		            data:arr2
		        }

		    ]
			};
			var myChart = echarts.init(document.getElementById('ptb01'))
      myChart.setOption(option);
    },
    getptb02:function(){
      var res=this.itemData.customerSales;
      var arr1=[]
      var arr2=[];
      for(var i=0;i<res.length;i++){
        arr1.push(res[i].name)
        arr2.push(res[i].salesVolume)
      }
      var option = {
				barWidth :10,
		    grid: {
		        left: '3%',
		        right: '3%',
		        bottom: '3%',
		        top:'3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01],
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    yAxis: {
		        type: 'category',
		        data: arr1,
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    series: [
		        {
		            name: '2011年',
		            type: 'bar',
		            itemStyle:{
								        normal:{
								           color:'#FF8C00'
								        }
								  },
		            data: arr2
		        }

		    ]
			};
			var myChart = echarts.init(document.getElementById('ptb02'))
      myChart.setOption(option);
    },
    getptb03:function(){
      var res=this.itemData.crowdGather;
      var arr1=[]
      var arr2=[];
      for(var i=0;i<res.length;i++){
        arr1.push(res[i].name)
        arr2.push(res[i].salesVolume)
      }
      var option = {
				barWidth :10,
		    grid: {
		        left: '3%',
		        right: '3%',
		        bottom: '3%',
		        top:'3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01],
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    yAxis: {
		        type: 'category',
		        data:arr1,
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    series: [
		        {
		            name: '2011年',
		            type: 'bar',
		            itemStyle:{
								        normal:{
								           color:'#00FF00'
								        }
								  },
		            data: arr2
		        }

		    ]
			};
			var myChart = echarts.init(document.getElementById('ptb03'))
      myChart.setOption(option);
    },
    getptb04:function(){
      var res=this.itemData.cityRankTop.cityRank;
      var arr1=[]
      for(var i=0;i<res.length;i++){
        var obj={};
        obj.name=res[i].cityName;
        obj.value=res[i].proportion
        arr1.push(obj)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },

          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
            			center: ['40%', '50%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },

                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data:arr1,
                  itemStyle:{
								        normal:{
								           label:{
								              show: true,
								              formatter: '{b} : {c} ({d}%)'
								           },
								           labelLine :{show:true},
								           color:function(params) {
                            var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                ];
                                return colorList[params.dataIndex]
                             }
								        }
								  },
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('ptb04'))
      myChart.setOption(option);
    },

  },
  updated:function(){

  },
}
</script>
<style>
   @import '../../../static/other/css/zlgj/index.css'
</style>
